$theme-name: 'dark';

// Notification & Alert.
$red: #e45959;
$light-red: #503434;
$lighter-red: #433131;

$dark-yellow: #e99003;
$yellow: #a78820;
$light-yellow: #2f280a;
$lighter-yellow: #2f280a;

$green: #59db8f;
$light-green: #344e3f;
$lighter-green: #32453a;

$blue: #429ae3;

$disabled-bg-color: #2b2b2b;
$disabled-item-color: #808080;
$disabled-item-bg-color: #383838;

// Layout
$header-bg-color: #2b2b2b;
$sidebar-bg-color: #454545;

$scrollbar-track-color: rgba(#acbbc2, .55);
$scrollbar-thumb-color: rgba(#878787, .85);
$scrollbar-thumb-color-darken: 5%;

$sidebar-scrollbar-track-color: rgba(#87d1ff, .55);
$sidebar-scrollbar-thumb-color: rgba(#87d1ff, .85);

$sidebar-toggle-bg-position: -630px -592px;

// Main
$font-color: #f2f2f2;
$font-selected-color: #f2f2f2;
$font-alt-color: #737373;
$body-bg-color: #0e1012;
$overlay-bg-color: #000000;

// Main menu
$menu-main-color: #f2f2f2;
$menu-main-hover-bg-color: #0e0e0e;
$menu-main-selected-bg-color: #202020;
$menu-main-selected-border-color: #c5c5c5;
$menu-main-expanded-bg-color: #0d0d0d;

$menu-main-submenu-color: #f2f2f2;
$menu-main-submenu-bg-color: #2b2b2b;
$menu-main-submenu-border-color: #0d0f11;
$menu-main-submenu-hover-bg-color: #0e0e0e;
$menu-main-submenu-selected-bg-color: #1c1c1c;
$menu-main-submenu-selected-border-color: #c5c5c5;

$menu-main-submenu-next-level-bg: #454545 !default;
$menu-main-submenu-next-level-shadow: rgba(#2b2b2b, .35) !default;

$menu-main-icons: (
		dashboard: -570px -664px,
		problems: -570px -688px,
		monitoring: -570px -712px,
		inventory: -570px -736px,
		reports: -570px -760px,
		configuration: -570px -784px,
		administration: -570px -808px
);

// UI
$ui-bg-color: #2b2b2b;
$ui-bg-selected-color: #4f4f4f;
$ui-hover-color: #383838;
$ui-border-color: #303030;
$ui-placeholder-background-color: darken($ui-hover-color, 15%);
$ui-highlighted-parent-background-color: darken($ui-hover-color, 10%);
$ui-sortable-helper-background-color: $ui-bg-color;
$ui-sortable-helper-border-color: $ui-border-color;

$action-hover-color: #454545;
$action-border-color: #383838;
$action-shadow-color: rgba(0, 0, 0, .5);

$table-border-color: #383838;

$ui-tab-bg-selected-color: #69808d;

// Forms
$form-font-color: #e1e3ed;
$form-bg-color: #383838;
$form-border-color: #4f4f4f;
$form-border-focus-color: #768d99;

$form-disabled-font-color: #525252;
$form-disabled-bg-color: #2b2b2b;
$form-disabled-border-color: #3d3d3d;

$scrollbar-track-color: #1f1f1f;
$scrollbar-thumb-color: #383838;

// Search form
$form-search-bg-color: #191919;
$form-search-focused-border-color: $form-border-focus-color;
$form-search-icon-bg-position: -570px -616px;

// Error messages
$msg-bad-color: darken(desaturate($red, 10%), 20%);
$msg-good-color: darken(desaturate($green, 10%), 20%);
$msg-warning-color: #a97d38;
$msg-warning-border-color: #614f32;

// Buttons
$btn-font-color: #f2f2f2;
$btn-bg-color: #69808d;
$btn-border-color: #768d99;

$btn-alt-font-color: #768d99;
$btn-alt-bg-color: transparent;
$btn-alt-border-color: $btn-border-color;

$btn-form-font-color: #f2f2f2;
$btn-form-bg-color: $form-bg-color;
$btn-form-hover-color: #414141;
$btn-form-border-color: $form-border-color;

$btn-disabled-font-color: #525252;
$btn-disabled-bg-color: transparent;
$btn-disabled-border-color: #3d3d3d;

$btn-back-map-background-color: rgba(0, 0, 0, .8);
$btn-back-text-color: #ffffff;
$btn-back-background-hover: #768d99;

// Links
$link-color: #4796c4;
$link-hover-color: #4796c4;
$link-active-color: #4796c4;
$link-visited-color: #4796c4;

$link-main-nav-color: rgba(#ffffff, .8);
$link-main-nav-hover-color: #ffffff;
$link-main-nav-active-color: #ffffff;
$link-main-nav-visited-color: rgba(#ffffff, .8);

$link-main-subnav-color: rgba(#ffffff, .8);
$link-main-subnav-hover-color: #ffffff;
$link-main-subnav-active-color: #ffffff;
$link-main-subnav-visited-color: rgba(#ffffff, .8);

// Analog clock
$clock-face-color: #383838;
$clock-hand-color: #f2f2f2;
$clock-hand-sec-color: #69808d;
$clock-lines-color: #4f4f4f;

// Statuses
$problem-unack-fg-color: #ff3333;
$problem-ack-fg-color: #ff3333;
$ok-unack-fg-color: #00ff00;
$ok-ack-fg-color: #00ff00;

// Multiselect
$multiselect-selected-bg-color: #696969;

.status-na-bg,
.status-info-bg,
.status-warning-bg,
.status-average-bg,
.status-high-bg,
.status-disaster-bg {
	border-color: rgba($ui-bg-color, .2) !important;
}

.timeline-axis {
	border-right-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;

	&::before {
		background-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;
	}
}

// Import compare.
$toc-title-color: #f2f2f2;
$toc-title-bg-color: #4f4f4f;


// Important! @import string should come after variables
@import 'screen.scss';

.sidebar {
	&.is-compact:not(.is-opened) {
		.form-search {
			.search-icon {
				opacity: .75;
			}
		}
	}
}

// Tables.
.list-table {
	thead th {
		border-color: lighten($table-border-color, 3%);
	}

	&.compact-view {
		tr {
			&:hover {
				td {
					&.na-bg,
					&.info-bg,
					&.warning-bg,
					&.average-bg,
					&.high-bg,
					&.disaster-bg {
						color: #000000;
					}
				}
			}

			&[class*='flh-'] {
				td {
					box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
				}
			}
		}

		td {
			&.na-bg,
			&.info-bg,
			&.warning-bg,
			&.average-bg,
			&.high-bg,
			&.disaster-bg {
				color: #000000;
				box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .1);
			}
		}
	}
}

.dashboard-navigation-tabs {
	& .csortable > .csortable-item > div,
	& .csortable-list > .csortable-item > div:hover {
		border: 1px solid transparent;
	}
}

// Dashboard, widgets and iterators.
// To maintain code clarity:
//   - Do not mix rules for dashboard view mode and dashboard edit mode.
//   - Do not mix rules for widgets and iterators.

.dashboard-grid-widget {
	&.dashboard-grid-widget-hidden-header {
		&.dashboard-grid-widget-focus {
			.dashboard-grid-widget-head {
				box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
			}
		}
	}
}

.dashboard-grid-iterator {
	&.dashboard-grid-iterator-focus {
		.dashboard-grid-iterator-head {
			box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
		}
	}
}

.dashboard.dashboard-is-edit-mode {
	.dashboard-grid-widget {
		&.ui-draggable-dragging {
			&.dashboard-grid-widget-hidden-header {
				.dashboard-grid-widget-head {
					box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
				}
			}
		}

		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			&::before {
				box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .5);
			}

			.dashboard-grid-widget-head {
				border-color: $ui-border-color;
			}

			.dashboard-grid-widget-content {
				border-color: $ui-border-color;
			}
		}
	}

	.dashboard-grid-iterator {
		&.ui-draggable-dragging {
			.dashboard-grid-iterator-head {
				box-shadow: 0 -6px 8px -2px rgba(0, 0, 0, .5);
			}
		}

		&.ui-resizable-resizing,
		&.ui-draggable-dragging {
			&::before {
				box-shadow: 0 4px 20px 2px rgba(0, 0, 0, .5);
			}

			.dashboard-grid-iterator-head {
				border-color: $ui-border-color;
			}

			.dashboard-grid-iterator-content {
				.dashboard-grid-widget {
					.dashboard-grid-widget-head {
						border-color: $ui-border-color;
					}

					.dashboard-grid-widget-content {
						border-color: $ui-border-color;
					}
				}

				.dashboard-grid-iterator-placeholder > div {
					border-color: $ui-border-color;
				}
			}

			.dashboard-grid-iterator-mask {
				border: 0;
			}
		}
	}

	.dashboard-grid-widget-placeholder > div {
		background-color: darken($ui-bg-color, 3%) !important;
	}
}

// Graph and map.
.btn-back-map-container {
	.btn-back-map {
		.btn-back-map-icon {
			background-position: -85px -725px;
		}
	}
}

// Time selection.
.ui-tabs-nav {
	.ui-tabs-active {
		.btn-time {
			&::after {
				background-position: -87px -583px;
			}
		}

		.filter-trigger {
			&::after {
				background-position: -87px -547px;
			}
		}
	}
}

.time-quick {
	li {
		a {
			&:focus {
				color: $white;
			}
		}
	}
}

.icon-action-msgs {
	&[data-count]::after {
		color: $font-selected-color;
	}
}

.icon-action-severity-up::before {
	background-position: -624px -245px;
}

.icon-action-severity-down::before {
	background-position: -649px -245px;
}

.icon-actions-number-gray {

	&[data-count]::after {
		color: $font-selected-color;
	}
}

.icon-description::after {
	color: $font-selected-color;
}

.totals-list {
	color: darken($font-color, 85%);
}

// Widget "Host availability".
.host-avail-widget {

	&.list-table {
		color: darken($font-color, 85%);

		tbody th {
			color: $font-color;
		}
	}

	.host-avail-total {
		color: $font-color;
	}
}

.breadcrumbs {
	&>::after {
		content: " /";
	}

	&>:last-child::after {
		content: "";
	}
}
